<template>
  <div class="roomlist">
    <div class="roomlist-container">
      <div class="roomlist-baseroom" id="roomlist-baseroom-fit">
        <div class="roomlist-baseroom-card">
          <div class="roomcard">
            <div class="roompanel">
              <div class="roompanel-pic">
                <div class="m-img " style="width: 100%; height: 100%;">
                  <img :src="baseRoomsInfo[0].base_room_cover_url" :alt="baseRoomsInfo[0].base_room_name" style="width: 100%;height: 100%;" @click="showImg(baseRoomsInfo[0].base_room_cover_url,true)">
                </div>
              </div>
              <div class="roomname">{{baseRoomsInfo[0].base_room_name}}</div>
              <div class="seeroom">查看客房信息</div>
            </div>
            <div style="display:block;flex:1">
              <div class="saleroomlist" v-for="(roomsInfo,index) in baseRoomsInfo" :key="index" style="width:100%;padding-top: 20px;">
                <div class="salecardlist-rooms">
                  <div class="ubt-salecard salecard " style="display:flex;justify-content: space-between;">
                    <div class="demo-image" v-for="(img,i) in roomsInfo.images.split(';').slice(0,2)" :key="i" style="display:inline-flex;flex:1;">
                      <div style="display: flex; align-items: center;">
                        <!-- <span class="demonstration" style="margin-right:20px;">房间展示图</span> -->
                        <el-image :src="img" style="width:100px;height:100px" @click="showImg(img,true)">
                          <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                          </div>
                        </el-image>
                      </div>
                    </div>
                    <div class="text">{{roomsInfo.room_facilities}}</div>
                    <div class="salecard-price-button" style="width:80px">
                      <div class="book-box">
                        <div class="book book-hover" @click="topay()">预订</div>
                      </div>
                      <p class="paytype">在线付</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoomList',
  props: {
    baseRoomsInfo: {
      type: Array
    }
  },
  methods: {
    topay() {
      this.$router.push('/pay')
      this.$store.dispatch('getHotelRoomName', this.baseRoomsInfo[0].base_room_name)
    },
    showImg(imgUrl, tag) {
      // console.log(img,t);
      this.$store.dispatch('showBigImg', {
        imgUrl,
        tag
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pic-box {
  width: 500px;
  height: 500px;
}
.text {
  width: 400px;
  margin-right: 20px;
  color: #666;
  font-size: 14px;
  height: 97px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.search {
  background: #fff;
  padding: 24px 24px 8px;
}
.search-box {
  background: #f0f2f5;
  position: relative;
  padding: 16px;
  max-height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .roomsearch-container {
    background: #f0f2f5;
    position: relative;
    ul {
      width: 720px;
      height: 40px;
      display: inline-flex;
      background-color: #fff;
    }
    li {
      display: inline-block;
      background: #fff;
      border: 1px solid #dadfe6;
      outline: none;
      .calendar-container {
        background-color: #fff;
        display: inline-flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        height: 100%;
        .time-tab {
          position: relative;
          width: calc(50% - 24px);
          height: 100%;
          .focus-input {
            width: 100%;
            height: 100%;
            border: none;
            border-bottom: 2px solid transparent;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 10px 0 6px 16px;
            box-sizing: border-box;
          }
          .show-hightlight {
            font-weight: 700;
            font-size: 16px;
            color: #0f294d !important;
            line-height: 22px;
            letter-spacing: 0;
            text-align: left;
          }
          .out-time {
            text-align: right;
          }
          .out-time {
            padding: 10px 16px 6px 0;
          }
        }
        .nights {
          font-size: 14px;
          color: #8592a6;
          letter-spacing: 0;
          text-align: center;
          line-height: 18px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 3;
          user-select: none;
        }
      }
      .room-guest-container {
        width: 100%;
        height: 100%;
        min-width: 160px;
        user-select: none;
        position: relative;
        outline: none;
        .room-guest-normal {
          background: #fff;
          width: 100%;
          height: 100%;
          position: relative;
          padding: 8px 12px;
          .info {
            margin-top: 2px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .show-hightlight {
            font-weight: 700;
            font-size: 16px;
            color: #0f294d !important;
            line-height: 22px;
            letter-spacing: 0;
            text-align: left;
          }
          .icon-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            font-size: 16px;
          }
          .icon-arrow-down {
            font-size: 16px;
          }
        }
        .room-guest {
          cursor: pointer;
        }
        * {
          box-sizing: border-box;
        }
        .choice {
          position: absolute;
          top: calc(100% + 1px);
          z-index: 9;
          left: -1px;
          background: #fff;
          width: 300px;
          padding: 16px;
          border: 1px solid #ddd;
          cursor: pointer;
        }
        .bottom-line {
          width: 100%;
          height: 2px;
          background: #2681ff;
          position: relative;
          top: -1px;
          left: 0;
          z-index: 9;
        }
        .child-kid {
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          label {
            color: #0f294d;
            font-size: 16px;
            letter-spacing: 0;
            text-align: left;
            line-height: 18px;
            user-select: none;
            span:last-child {
              display: block;
              font-size: 12px;
              line-height: 1;
              color: #6b8299;
            }
          }
          .actions {
            display: flex;
            align-items: center;
            .icon-btn {
              width: 24px;
              height: 24px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              background: #fff;
              border: 1px solid #dadfe6;
              border-radius: 50%;
              color: #999;
              &.disabled {
                cursor: default;
                background-color: #eee;
                border-color: #eee;
                color: #fff;
              }
              .btn {
                position: relative;
                top: 1px;
                font-weight: 700;
                user-select: none;
                -webkit-user-select: none;
              }
            }
            .count {
              font-size: 18px;
              color: #0f294d;
              width: 36px;
              text-align: center;
            }
          }
        }
        .done {
          text-align: right;
          margin-top: 20px;
          cursor: pointer;
          span {
            display: inline-block;
            min-width: 100px;
            padding: 0 20px;
            font-size: 16px;
            color: #2681ff;
            border-radius: 4px;
            cursor: pointer;
          }
        }
        .icon-add {
          font-size: 16px;
        }
        .icon-minus {
          font-size: 16px;
        }
      }
    }
    .detail-calendar {
      flex-grow: 0;
    }
    .detail-roomguest {
      margin-left: -1px;
      flex-grow: 1;
    }
  }
}
.filter {
  background: #fff;
  padding: 0 24px 24px;
  .cfilter {
    padding: 16px 0;
    .cfilter-filterinfo-ul {
      display: flex;
      justify-content: space-between;
      .cfilter-filterinfo-ul-li {
        height: 14px;
        flex: auto;
        text-align: center;
        border-left: 2px solid #dadfe6;
        padding: 0 8px;
        font-weight: 700;
        .selector-wrapper {
          display: inline-block;
          position: relative;
          top: -1px;
        }
        .single-selector-input,
        .multi-selector-input {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 18px;
          height: 18px;
          border: none;
          padding: 0;
          font-size: 14px;
          cursor: pointer;
          background-color: #fff;
          box-sizing: border-box;
          position: relative;
          display: inline-block;
          width: 100%;
          display: flex;
          .m-input {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 1;
            left: 0;
            display: inline-block;
            input {
              height: 100%;
              cursor: pointer;
              opacity: 0;
              padding: 0 8px;
              line-height: 1;
              background: #fff;
              width: 100%;
              box-sizing: border-box;
              font-size: 14px;
              border: 1px solid #e5e5e5;
              transition: border-color 0.25s;
            }
          }
          i {
            position: absolute;
            right: 10px;
            z-index: 0;
            position: static;
            padding-left: 4px;
          }
          &.placeholder {
            color: #234;
          }
        }
        .icon-arrow-down {
          font-size: 22px;
        }
      }
    }
  }
  .filter-tag {
    border: 1px solid #dadfe6;
    border-radius: 2px;
    padding: 8px 16px;
    display: inline-block;
    margin: 8px 8px 0 0;
    font-size: 14px;
    color: #234;
    line-height: 18px;
  }
}
.roomlist {
  .roomcard {
    display: flex;
    width: 100%;
    padding-bottom: 24px;
  }
  .roompanel {
    border-right: 1px solid #dadfe6;
    flex: auto;
    max-width: 124px;
    width: 124px;
  }
  .roompanel-pic {
    width: 100px;
    height: 71px;
    position: relative;
    cursor: pointer;
    & > div {
      position: absolute;
    }
    .m-img {
      display: inline-flex;
      opacity: 1;
      transition: all 0.45s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
      justify-content: center;
      align-items: center;
    }
  }
  .roomname {
    width: 100px;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #0f294d;
    padding: 6px 0;
  }
  .seeroom {
    padding-bottom: 12px;
    font-size: 12px;
    color: #287dfa;
    line-height: 12px;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
  }
  .saleroomlist {
    width: 786px;
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .salecardlist-rooms {
      flex: 100%;
    }
    .salecard {
      padding: 24px 0 24px 24px;
      border-left: 1px solid #dadfe6;
      border-bottom: 1px solid #dadfe6;
      margin-left: -1px;
      position: relative;
      &:first-child {
        padding-top: 0;
      }
      .salecard-flex {
        display: flex;
        .salecard-people {
          width: 236px;
          padding-right: 16px;
          box-sizing: border-box;
          .people-box {
            display: flex;
            .bedfacility {
              flex: 1;
              color: #0f294d;
              .bm-item {
                margin-bottom: 6px;
                font-size: 14px;
                .positive-color {
                  color: #06aebd;
                }
              }
            }
          }
          .adult {
            width: 80px;
            padding-right: 21px;
          }
          .des-with-icon {
            display: inline-block;
            color: #455873;
            vertical-align: middle;
            padding-bottom: 2px;
            .normal-icon {
              font-size: 18px;
              margin-right: 4px;
              display: inline-flex;
              align-items: center;
              vertical-align: middle;
            }
            .desc-text {
              vertical-align: top;
              line-height: 18px;
            }
            .icon-people {
              font-size: 16px;
            }
          }
        }
        .salecard-otherfacility {
          width: 102px;
          padding-right: 16px;
          box-sizing: border-box;
        }
        .salecard-policy {
          width: 160px;
          padding-right: 30px;
          box-sizing: border-box;
          .policy {
            display: block;
            padding-top: 6px;
            &:first-child {
              padding-top: 0;
            }
            .des-with-icon {
              display: inline-block;
              vertical-align: baseline;
            }
            .green {
              color: #06aebd;
            }
          }
        }
        .promotion {
          max-width: 120px;
          padding-right: 10px;
          box-sizing: border-box;
          font-size: 12px;
          div {
            margin-bottom: 8px;
          }
          .salecard-rc-tag {
            font-size: 14px;
            color: #0f294d;
          }
          .promotion-ctrip-tag {
            padding: 1px 4px;
            background: #fff0e5;
            border-radius: 2px;
            color: #ff6f00;
            line-height: 17px;
          }
          .promotion-ctrip-tag-hover {
            cursor: pointer;
          }
          .salecard-rc-tag {
            font-size: 14px;
            color: #0f294d;
          }
        }
        .salecard-price {
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
          .salecard-price-panel {
            margin-right: 16px;
            word-break: break-all;
            text-align: right;
            .price {
              word-break: break-all;
              margin-bottom: 4px;
            }
            .price-delete {
              font-size: 14px;
              color: #455873;
              text-align: right;
              line-height: 18px;
              text-decoration: line-through;
              margin-right: 8px;
            }
            .price-display {
              line-height: 28px;
              color: #0086f6;
              font-size: 24px;
              display: inline-block;
              font-weight: 600;
            }
            .price-display-hover {
              cursor: pointer;
              border-bottom: 1px dotted;
            }
            .discount-tag {
              font-size: 12px;
              margin-bottom: 8px;
              color: #ff6f00;
              border-radius: 2px;
              border: 1px solid rgba(255, 111, 0, 0.3);
              display: inline-flex;
              flex-direction: row-reverse;
              flex-wrap: wrap;
              .tag {
                padding: 2px 4px;
                line-height: 1;
                box-sizing: border-box;
                &:first-child {
                  background-color: rgba(255, 111, 0, 0.2);
                }
                .line {
                  width: 2px;
                  height: 8px;
                  margin: 0 4px 0 -2px;
                  background-color: #ffe9d8;
                  display: inline-block;
                }
              }
            }
          }
          .salecard-price-button {
            color: #fff;
            margin-right: 10px;
            .book-box {
              text-align: center;
            }
            .book {
              font-size: 16px;
              line-height: 38px;
              background-color: #ff9500;
              text-align: center;
              height: 38px;
              justify-content: center;
              align-items: center;
              border-radius: 2px;
              font-weight: 700;
              padding: 0 24px;
              box-sizing: border-box;
              min-width: 75px;
              display: inline-block;
              &.book-hover {
                cursor: pointer;
              }
            }
            .paytype {
              text-align: center;
              font-size: 14px;
              font-weight: 600;
              color: #455873;
              line-height: 20px;
              margin-top: 8px;
            }
          }
        }
      }
      .bed {
        margin-bottom: 6px;
      }
      .bed-content {
        display: inline-block;
        font-size: 14px;
        line-height: 18px;
        vertical-align: baseline;
        color: #0f294d;
      }
      span.underline {
        border-bottom: 1px dotted;
        cursor: pointer;
      }
      .facility {
        display: block;
        margin-bottom: 6px;
        .des-with-icon {
          display: inline-block;
          vertical-align: baseline;
          padding-bottom: 2px;
          .desc-text {
            vertical-align: top;
            line-height: 18px;
          }
        }
      }
    }
  }
}
.roomlist-container {
  background: #f0f2f5;
  .roomlist-baseroom-card {
    background: #fff;
    margin-top: 4px;
    padding: 24px 24px 0;
  }
}
.salecard-price-button {
  color: #fff;
  margin-right: 10px;
  .book-box {
    text-align: center;
  }
  .paytype {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #455873;
    line-height: 20px;
    margin-top: 8px;
  }
  .book {
    font-size: 16px;
    line-height: 38px;
    background-color: #ff9500;
    text-align: center;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    font-weight: 700;
    padding: 0 24px;
    box-sizing: border-box;
    min-width: 75px;
    display: inline-block;
    &.book-hover {
      cursor: pointer;
    }
  }
}
</style>